/**
* @desc:  人员管理-添加人员-选择本地电脑图片
* @author qiankui
* @date 2023-9-13 14:35:32
*/
<template>
    <div>
        <el-dialog append-to-body :close-on-click-modal="false" :visible="localSelectionImagesFlag" class="zdy-dialog"
                   width="400px" :title="$t('Select Picture')"
                   :before-close="handleCloseDialog">

            <div class="el-dialog-div">
                <el-upload
                        class="upload-resource"
                        v-if="!showBase64Pic"
                        ref="picUpload"
                        :accept="accept"
                        :file-list="fileList"
                        :on-change="fileChange"
                        action=""
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :auto-upload="false"
                        :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <div class="picView" v-if="showBase64Pic">

                    <!--<img :src="showBase64Pic" alt="">-->
                    <el-image
                            style="width: 100%;height: 147px;"
                            :src="showBase64Pic"
                            fit="contain"></el-image>

                    <div class="picTool">
                        <div class="picToolView">
                            <i class="el-icon-zoom-in toolIcon" @click="picPreview(0,0)"></i>
                            <i class="el-icon-delete toolIcon" @click="removePic(0,0)"></i>
                        </div>
                    </div>
                </div>
            </div>


            <el-dialog @close="closePreview" append-to-body :visible.sync="dialogVisible" width="auto" style="text-align: center;">
                <img :src="dialogImageUrl" alt="">
            </el-dialog>
            <br>
            <br>
            <div class="footBtnBox">
                <!--取消-->
                <el-button size="small" type="handle" @click="handleCloseDialog">{{this.i18n.t('Cancel')}}</el-button>
                <!--保存-->
                <el-button size="small" v-if="showBase64Pic" type="primary" :saveLoading="saveLoading" @click="save">
                    {{this.i18n.t('save')}}
                </el-button>
            </div>

        </el-dialog>
    </div>
</template>

<script>
    import {
        fileFiletobase64,
        // jp2转base64
        fileImageconverttobase64
    } from "@/api/pcmj/zzxx";

    export default {
        name: "localSelectionImages",
        props: {
            localSelectionImagesFlag: {
                type: Boolean,
                default: false
            },
            tabsIndex: {
                type: Number,
                default: 0
            },
            picIndex: {
                type: Number,
                default: 0
            },
        },
        data() {
            return {
                accept:'.jpg,.jp2',
                acceptQRCode:'.jpg,.png',
                showBase64Pic: null,
                saveBase64Pic: null,
                saveLoading: false,
                fileList: [],
                dialogImageUrl: '',
                dialogVisible: false,
                picDiskPath:null
            }
        },
        mounted(){
            this.$nextTick(() =>{
                document.querySelector(".upload-resource .el-upload").click()
            });
        },
        methods: {
            removePic() {
                this.fileList=[]
                this.showBase64Pic=null
                this.saveBase64Pic=null
                this.picDiskPath=null
            },
            closePreview(){
                this.dialogVisible=false
                this.dialogImageUrl=null
            },
            picPreview() {
                this.dialogImageUrl=this.showBase64Pic
                this.dialogVisible=true
            },
            // 将本地文件转成Base64
            async fileFiletobase64(filePath) {
                let res = await fileFiletobase64({filePath: filePath});
                return res
            },
            async save() {
                this.saveLoading = true

                this.$emit('setPicFn', {
                    tabsIndex: this.tabsIndex,
                    picIndex: this.picIndex,
                    showBase64Pic: this.showBase64Pic,
                    saveBase64Pic: this.saveBase64Pic,
                    fileInfo:this.picDiskPath
                })
                console.log('************',this.tabsIndex,this.picIndex,this.picDiskPath);
                this.saveLoading = false
                this.handleCloseDialog()
            },
            // 文件状态改变时的钩子
            fileChange(file, fileList) {
                var _this=this
                var suffix = file.name.substring(file.name.lastIndexOf('.') + 1)
                console.log('后缀', suffix);
                var isLtType=null
                // 访问码页面，二维码图片格式限制为jpg\png
                if (this.tabsIndex==5){
                  isLtType = this.acceptQRCode.indexOf(suffix) >= 0
                }else{
                  isLtType = this.accept.indexOf(suffix) >= 0
                }



                const isLt2M = file.size / 1024 / 1024 < 1;

                if (!isLtType) {
                  if (this.tabsIndex==5){
                    // 只能选择后缀名是jpg或png格式的图片！
                    this.W.$tips("warning",'只能选择后缀名是jpg或png格式的图片！');
                  }else{
                    // 只能选择后缀名是jpg或jp2格式的图片！
                    this.W.$tips("warning",this.i18n.t('Only images with suffix names in jpg or jp2 format can be selected'));
                  }

                    this.$refs.picUpload.clearFiles()
                    return
                }
                if (!isLt2M) {
                    // 请选择小于1MB的图片
                    this.W.$tips("warning",this.i18n.t('Please select a picture smaller than 1MB'));
                    this.$refs.picUpload.clearFiles()
                    return
                }

                console.log('file', file);
                this.file = file.raw;
                if (fileList.length > 0) {

                    this.fileList = [fileList[fileList.length - 1]]; // 获取最后一次选择的文件
                    // 图片在磁盘上的绝对路径
                    this.picDiskPath=file.raw.path
                    // 图片转base64，界面显示用
                    fileImageconverttobase64(file.raw.path).then((res) => {
                        this.showBase64Pic = res
                    }).catch().finally(() => {
                        if (suffix=='jp2'){
                            // 图片转base64，保存时使用
                            _this.fileFiletobase64(file.raw.path).then(res => {
                                _this.saveBase64Pic = res
                            })
                        }
                    })

                }
            },
            handleCloseDialog() {
                this.$emit('update:localSelectionImagesFlag', false)
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
                this.fileList=[]

                this.$refs.picUpload.clearFiles()
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            }
        }
    }
</script>

<style lang="scss" scoped>
    /*::v-deep .el-dialog__body{*/
    /*text-align: center !important;*/
    /*}*/
    .hide .el-upload--picture-card {
        display: none;
    }

    .picTool {
        /*display: inline-block;*/
        display: none;
        width: 100%;
        height: 147px;
        left: 0;
        top: 0px;;
        background-color: rgba(0, 0, 0, .5);
        position: absolute;
        z-index: 6;
        /*left: 10px;*/
        color: #fff
    }

    .picView {
        position: relative;
        box-sizing: border-box;
        /*border: 1px solid red;*/
        width: 180px;
        height: 147px;
        display: inline-block;
        box-sizing: border-box;
    }

    .elImage {
        width: 180px;
        height: 240px;
        box-sizing: border-box;
        position: absolute;
        left: 10px;
        top: 0px;
        z-index: 5
    }

    .picView:hover .picTool {
        display: inline-block;
    }

    .picToolView {
        margin-top: 60px;
        font-size: 20px;
        text-align: center
    }

    .toolIcon {
        cursor: pointer;
        margin-right: 25px;
    }
    .disabledImg {
        :deep(.el-upload--picture-card) {
            display: none;
        }
    }
    .el-dialog-div{
        height: 150px;
        text-align: center;
    }
    .upload-resource{
        text-align: center;
    }
</style>
